<template>
  <div class="container">
    <el-card style="height: 700px; width: 100%">
      <div class="pageTitle">
        <h2>{{ title() }}</h2>
        <div class="btn">
          <el-button text @click="$router.go(-1)"
            ><el-icon><Close /></el-icon
          ></el-button>
        </div>
      </div>
      <el-form
        :inline="true"
        :model="form"
        class="demo-form"
      >
        <el-form-item label="通知人员">
          <el-input v-model="form.noticeMan" disabled />
        </el-form-item>
        <el-form-item label="通知时间">
          <el-date-picker v-model="form.notifyTime" type="datetime" disabled />
        </el-form-item>
        <el-form-item label="通知类型">
          <el-input v-model="form.msgType" disabled />
        </el-form-item>
        <el-form-item
          v-if="form.msgType === '会议'"
          label="会议时间:"
          prop="meetingTime"
        >
          <el-date-picker
            v-model="form.meetingTime"
            type="datetime"
            placeholder="选择日期"
            clearable
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            disabled
          />
        </el-form-item>
        <el-form-item
          v-if="form.msgType === '会议'"
          label="会议名称:"
          prop="meetingName"
        >
          <el-input
            class="input-item"
            v-model="form.meetingName"
            placeholder="请输入"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="通知内容" style="width: 100%">
          <el-input v-model="form.msgText" type="textarea" disabled />
        </el-form-item>
        <el-form-item label="通知/图片" style="width: 100%">
          <fileupload
            @update:modelValue="handleModelValueFile"
            :modelValue="form.msgFile"
          ></fileupload>
        </el-form-item>
        <el-form-item label="通知范围">
          <div class="name_content">
            <el-tag
              v-for="(item, index) in form.msgWide"
              v-if="form.msgWide !== 0"
              type="success"
              :key="index"
            >
              {{ item }}
            </el-tag>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- <el-card style="height: 700px; width: 28%">
      <div class="remarks">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="评论" name="first">
            <div>
              <el-input
                placeholder="写下你的评论..."
                type="textarea"
                v-model="comments"
                minlength="1"
                maxlength="50"
                show-word-limit
                rows="3"
                class="custom-focus-color"
              >
              </el-input>
              <div
                style="
                  display: flex;
                  margin-top: 5px;
                  justify-content: flex-end;
                "
              >
                <el-button type="primary" round @click="addComments">
                  评论</el-button
                >
              </div>
              <div
                class="comments_content"
                v-for="(item, index) in commentsList"
                :key="index"
              >
                <div class="avatar">
                  <el-avatar :src="item.avatar"></el-avatar>
                </div>
                <div class="user_box">
                  <div class="comments_user">
                    <div class="name">
                      {{ item.comName }}({{ item.comRole }}):
                    </div>
                    <div class="time">{{ item.createTime }}</div>
                  </div>
                  <div class="tsan">
                    <div class="content">{{ item.comText }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已读" name="second">
            <div v-for="item in readUnreadList" :key="item.userId">
              <div class="avatar">
                <el-avatar :src="item.avatar"></el-avatar>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="未读" name="third">
            <div v-for="item in readUnreadList" :key="item.userId" style="display: flex; align-items: center;">
              <div style="display: flex; flex-direction: column; align-items: center;">
                <el-avatar :src="item.avatar"></el-avatar>
                <el-tag style="margin: 10px 0 0 0;" type="success">{{ item.userName }}</el-tag>
              </div>
              <el-tag type="success" style="margin-left: 20px">{{ item.nickName }}</el-tag>
            </div>
            <hr>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card> -->
  </div>
</template>
<script setup>
import { onMounted, ref, reactive } from "vue";
import { useRoute } from "vue-router";
import {
  notificationDetailApi,
  notificationCommentsAdd,
  commentListApi,
  viewReadUnreadApi,
} from "@/api/messageNotifications/notificationsList";
import fileupload from "@/components/FileUpload";
const url = import.meta.env.VITE_APP_BASE_API;
const route = useRoute();
const activeName = ref("first");
const comments = ref(""); // 评论
const title = () => {
  if (route.query.type) {
    return "审批详情";
  } else {
    return "通知详情";
  }
};
const form = reactive({
  noticeMan: "", // 通知人员
  msgType: "", // 通知类型
  notifyTime: "", // 通知时间
  meetingTime: "", // 会议时间
  meetingName: "", // 会议名称
  msgText: "", // 通知内容
  msgFile: null, // 通知附件
  msgWide: [], // 通知范围
});
// 获取详情数据
const getNoticeDetail = async () => {
  let id = Number(route.query.id);
  const res = await notificationDetailApi(id);
  console.log(res);
  if (res.code === 200 && typeof (res.data === "object")) {
    for (const key in res.data) {
      form[key] = res.data[key];
    }
  }
};


// 添加附件
// const handleModelValueFile = (val, result, operationType) => {
//   if (operationType === "success") {
//     if (result) {
//       formInline.addFile.push(result);
//     }
//   } else if (operationType === "delete") {
//     formInline.addFile.splice(result, 1);
//   }
// };
// 新增评论
const addComments = async () => {
  let data = {
    msgId: Number(route.query.id),
    comText: comments.value,
    type: "1",
  };
  const res = await notificationCommentsAdd(data);
  console.log(res);
  if (res.code === 200) {
    checkCommentList();
    comments.value = "";
  }
};
const commentsList = ref([]);
// 查看评论列表
const checkCommentList = async () => {
  let id = Number(route.query.id);
  const res = await commentListApi(id);
  if (res.code === 200 && res.rows.length >= 0) {
    commentsList.value = res.rows;
  }
};
const readUnreadList = ref([]); // 已读未读列表
// 根据消息id查看已读未读
const handleClick = async (pane) => {
  let index;
  if (pane.index === "1") {
    index = "1";
  } else if (pane.index === "2") {
    index = "0";
  } else {
    index = null;
  }
  let data = {
    msgId: Number(route.query.id),
    msgType: index,
  };
  if (index) {
    const res = await viewReadUnreadApi(data);
    if (res.code === 200 && res.data.length >= 0) {
      readUnreadList.value = res.data;
      console.log(res);
    }
  } else return;
};
onMounted(async () => {

  await getNoticeDetail();
  

  await checkCommentList();
});
</script>
<style scoped lang="scss">
.container {
  padding: 20px 10px;
  display: flex;
  justify-content: space-around;
  h2 {
    font-weight: 700;
  }
  .pageTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .btn {
      position: absolute;
      background: #0092ff;
      transform: rotate(45deg);
      height: 50px;
      width: 50px;
      right: -50px;
      top: -40px;
      text-align: center;
      .el-button {
        transform: rotate(-45deg);
        color: white;
        margin-top: 24px;
        margin-right: 10px;
      }
    }
  }
  .comments_content {
    display: flex;
    margin-top: 20px;
    .user_box {
      display: flex;
      .comments_user {
        margin-left: 10px;
        .name {
          width: 130px;
          color: #ff8200;
          font-size: 14px;
        }
      }
      .content {
        flex: 1;
        font-size: 14px;
        word-break: break-all;
      }
    }

    .time {
      color: #939393;
      margin-top: 6px;
      font-size: 12px;
    }
  }
}
</style>
